<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled/>
      <van-dropdown-item title="价格" v-model="priceValue" :options="option2" @change="priceChange"/>
      <van-dropdown-item title="分类" v-model="categoryVal" :options="filterCategory" @change="categoryChange"/>
    </van-dropdown-menu>
    <Products v-if="goodsList.length!==0" :goodsList="goodsList"></Products>
    <!-- 搜索提示 -->
    <van-empty v-else image="search" description="没有搜索到此商品" />
  </div>
</template>

<script>
import Products from '@/components/Products.vue'
export default {
  props:['filterCategory', 'goodsList'],
  data() {
    return {
      priceValue: '',
      categoryVal: '',
      option2: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由底到高', value: 'asc' }
      ]
    };
  },
  updated(){
    // 数据挂载完毕
    this.filterCategory.map(item =>{
      if(item.checked) {
        return this.categoryVal = item.value
        }
    })
  },
  methods:{
    categoryChange(value){
      this.$emit('categoryChange',value)
    },
    priceChange(value){
      this.$emit('priceChange', value)
    }
  },
  components:{
    Products
  }
};
</script>

<style lang="less" scoped></style>
